<!DOCTYPE html>
<html>
<title>我的相册</title>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="__PUBLIC__/js/jquery.min.js" ></script>
    <style type="text/css">
        body
        {
            margin:0px;
            background-color: ghostwhite;
        }

        #title
        {
            width: 100%;
            height: 50px;
            font-size: 18pt;
            text-align: center;
            line-height: 50px;
        background-color:#FF2D51;
        color: white;
        }

        #help-btn
        {
            position: absolute;
            top: 10px;
            right: 20px;
            height: 30px;
            line-height: 30px;
            font-size: 18pt;
            width: 60px;
            border-radius: 20px;
            text-decoration: none;
        background-color: #FFCC66;
        color: white;
        }

        #report-btn {
            position: absolute;
            top: 10px;
            left: 20px;
            height: 30px;
            line-height: 30px;
            font-size: 14pt;
            width: 60px;
        background-color: #FFCC66;
        border-radius: 20px;
        color: hite;
        text-decoration: none;
        }

        #content
        {
            position: relative;
            width: 100%;
            min-height: 100%;
        }

        #promt
        {
            position: absolute;
            width: 100%;
            height: 80%;
            top: 20%;
        }

        #promt>span
        {
            display: block;
            font-size: 18pt;
            text-align: center;
            width: 80%;
            margin: 20px 10% 0 10%;
            height:80px;
            line-height:80px;
        }

        .item
        {
            position: relative;
            margin: 20px auto;
            background-color: white;
            border-radius: 5px;
            -webkit-box-shadow: #666 0px 0px 10px;
            margin: 0 auto;
        }

        .item-pic
        {
            position: relative;
            width: 100%;
            margin: 0 auto;
            height: 160px;
            overflow: hidden;
            background-position: center;
            background-size: cover;
        {empty name='openid'}
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        {else}
        border-radius: 5px;
        {/empty}
        }

        .item-pv
        {
            position: relative;
            width: 100%;
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 12pt;
        }

        .item-edit , .item-del
        {
            text-align: center;
            line-height: 40px;
            font-size: 15pt;
            display: inline-block;
        }

        .item-pcount{
            position: absolute;
            top: 15px;
            left: -52px;
            z-index: 9;
            -webkit-transform: rotate(-35deg);
            height: 30px;
            line-height: 30px;
            width: 180px;
            text-align: center;
            font-size: 15px;
        background-color: #FF2D51;
        color: white;
        }

        .item-pwarp{
            width: 94%;
            height: 145px;
            position: absolute;
            overflow: hidden;
        }

        .item-edit
        {
            border-radius: 10px;
            width: 200px;
            height: 40px;
        background-color: #FF2D51;
        color: white;
        }

        .item-del
        {
            background-image: url(__IMG__/del.png);
        width: 20px;
        height: 25px;
        position: absolute;
        right: 20px;
        bottom: 14px;
        background-size: 100% 100%;
        }
        .item-lock
        {
            background-image: url(__IMG__/lock.png);
        width: 20px;
        height: 25px;
        position: absolute;
        left: 20px;
        bottom: 14px;
        background-size: 100% 100%;
        }
        .item-lock.unlock
        {
            background-image: url(__IMG__/unlock.png);
        width: 20px;
        height: 25px;
        background-size: 100% 100%;
        }

        .item-pedit{
            width: 100%;
            display: block;
            text-align: center;
            color: grey;
            text-decoration: none;
            padding: 10px 0;
        }

        .item-pdata{
            padding: 5px 0;
            font-size: 13px;
        }

        .item-pdata img{
            width: 25px;
            vertical-align: middle;
        }

        .item-pdata font{
            line-height: 25px;
            vertical-align: bottom;
        }

        .items{
            margin: 20px auto;
            border-bottom: 1px solid gainsboro;
            width: 90%;
            color: gray;
        }
        .items:last-child{
            border: 0;
        }

        .item-plock{
            background-image: url(__IMG__/lock.png);
        width: 15px;
        height: 20px;
        position: absolute;
        right: 10px;
        bottom: 10px;
        background-size: 100% 100%;
        }

        .item-plock.unlock{
            background-image: url(__IMG__/unlock.png);
        width: 20px;
        height: 20px;
        background-size: 100% 100%;
        }

        .businessCenterTips{ width: 100%; height: auto; display: box; display: -webkit-box; display: -mo-box; padding: 5px 0px; overflow: hidden; background: #fff; border-width: 1px 0px 1px 0px; border-style: solid; border-color: #eee;}
        .businessCenterTips .tips_img{ width: auto; height: 20px; display: block; border-right: 1px solid #eee; margin: 0px 10px; padding: 0px 10px 0px 0px;}
        .businessCenterTips .tips_img img{ width: auto; height: 20px; display: block;}
        .businessCenterTips a{ width: 100%; height: 20px; line-height: 20px; overflow: hidden; font-size: 14px;color: inherit;box-flex:1; -webkit-box-flex:1; -moz-box-flex:1;margin: 0;display: block;}
    </style>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js?v=20150120"></script>
</head>
<body>
<div id="title">
    {empty name='openid'}我的{/empty}音乐相册
    <a href="{:url('Album/help')}" id="help-btn">帮助</a>
</div>
<div id="content">
    {empty name='lists'}
    <div id="promt">
        <span>您还未制作过任何的音乐相册呢~</span>
    </div>
    {else}
    {volist name='lists' id='vo'}
    <div class="items">
        <div class="item">
            <div class="item-pwarp"><div class="item-pcount">共{$vo.total}张照片</div></div>
            <div class="item-pic" onclick="location.href='{:url('Album/index')}?id={:base64_encode($vo.id)}&uid={$vo.uid}'" style="background-image:url({$vo.img})"></div>
            {empty name='openid'}<a class="item-pedit" href="{:url('Album/index')}?id={:base64_encode($vo.id)}&uid={$vo.uid}&do=edit">编辑</a>{/empty}
        </div>
        {empty name='openid'}
        <div class="item-pdata">
            <div onclick="del_book(this,'{$vo.id}')"><img style="width: 21px;vertical-align: baseline;" src="__IMG__/delete.png"> <font>删除</font></div>
        </div>
        {/empty}
    </div>
    {/volist}
    {/empty}
</div>
<script type="text/javascript">
    function del_book(obj,aid){
        var uid = {$uid};
        if(confirm('删除后将不可恢复，确定删除吗？')){
            $.ajax({
                url:'{:url("Album/delAlbum")}',
                type:'post',
                data:{id:aid,uid:uid},
                success:function(result){
                    if(result.status == 1){
                        $(obj).parents('.items').remove();
                    }else{
                        alert(result.msg);
                    }
                }
            });
        }
    }

    var shareData = {
        title: "{$nickname}的音乐相册",
        link: "{:url('Album/myalbum')}?uid={$uid}",
        desc: "这是我做的相册哦，赶快来看看吧!",
        imgUrl: ""
    };

    jssdkconfig = {$sdkconfig} || { jsApiList:[] };
    jssdkconfig.debug = false;
    jssdkconfig.jsApiList = ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','showOptionMenu',];
    wx.config(jssdkconfig);
    wx.ready(function () {
        wx.onMenuShareAppMessage(shareData);
        wx.onMenuShareTimeline(shareData);
        wx.onMenuShareQQ(shareData);
        wx.onMenuShareWeibo(shareData);
    });
</script>
</body>
</html>
